<template>
	<view class="page-container back-grey-light">
		<!-- 自定义导航 -->
		<!-- <my-navigation ref="nav" from="index" backColorOpacity="auto" :collegeName="collegeName" :pageScroll.sync="pageScroll" pos="fixed"></my-navigation> -->
		
		<!-- 轮播图 -->
		<u-swiper :list="swipers" :height="windowHeight*0.38*2" interval="5000" @click="clickBannerCate"></u-swiper>
		
		<!-- tabs标签区域 -->
		<view :style="{position: 'sticky', top: 0, left: 0, zIndex: 99}">
			<view style="border-bottom: 2rpx solid #f8f8f8;">
				<u-tabs inactive-color="#999999" :active-color="primaryColor" :list="collegeList" name="name" :current="collegeIndex" @change="selectCollege"></u-tabs>
			</view>
			<view v-if="collegeIndex">
				<u-tabs inactive-color="#999999" :active-color="primaryColor" :list="tabList" name="name" :current="type" @change="change"></u-tabs>
			</view>
		</view>
		
		<!-- 公告消息盒子 -->
		<!-- <view class="back-white top-box prow-lg">
			<view>
				<view class="tip">公告</view>
			</view>
			<swiper
				class="top-list"
				:autoplay="true"
				:duration="500"
				:interval="3000"
				:circular="true"
				:vertical="true"
			>
				<swiper-item v-for="(item, index) in topList" :key="index">
					<view class="title">{{ item }}</view>
				</swiper-item>
			</swiper>
		</view> -->
		
		<!-- 列表 -->
		<view v-if="list0.length" class="pall-base">
			<view v-for="(item, index) in list0" :key="index" class="mb-l">
				<my-postcard :post="item" @clickPraise="postPraiseHandle" :index="index"></my-postcard>
			</view>
			<u-loadmore :status="loadStatus" />
		</view>
		<view v-else class="col-box center pcol-lg">
			<image src="/static/icon/nodata.png" style="width: 400rpx;height: 400rpx;"></image>
			<text class="s24 grey-light">还没有发布的帖子~</text>
		</view>
		
		<!-- 隐私协议弹窗 -->
		<my-privacy-pop :show="showPrivacyPop" :privacyContractName="privacyContractName" @agreeprivacyauthorization="handleAgreePrivacyAuthorization"></my-privacy-pop>
		
		<!-- 发布分类选择 -->
		<!-- <u-select
			v-model="showPublishCateSelect"
			:list="publishCates"
			value-name="id"
			label-name="name"
			title="请选择分类"
			confirm-text="去发布"
			:confirm-color="primaryColor"
			@confirm="selectPublishCate">
		</u-select> -->
		
		<!-- 自定义tabbar -->
		<!-- <u-tabbar :list="tabbar" :mid-button="true" active-color="#1BBBAF" inactive-color="#333333"
			:border-top="false" icon-size="54" mid-button-size="94" height="62px" :before-switch="beforeChangeTab">
		</u-tabbar> -->
		
	</view>
</template>

<script>
	import mixinPost from "@/common/mixin_post.js"
	import { mapState,mapMutations } from "vuex"
	export default {
		mixins: [mixinPost],
		data() {
			return {
				windowHeight: 0, // 窗口可用高度
				navHeight: 0, // 导航高度
				pageScroll: {}, // 页面滚动对象
				swipers: [], // 轮播图数组
				collegeList: [], // 学校列表
				collegeIndex: 0, // 学校tab下标
				type: 0, // 当前选中的类型-当前tab
				pageType: 0, // 页面类型0 首页
				
				privacyContractName: '', // 隐私协议名称
				showPrivacyPop: false, // 是否展示隐私协议弹窗
				
				topList: ['消息1', '消息2', '消息3'], // 置顶消息列表
				
			}
		},
		computed: {
			...mapState('m_page', ['tabbar', 'publishCates']),
			// ...mapState('m_user', ['backPraise', 'userId', 'collegeId', 'collegeName']),
			...mapState('m_user', ['backPraise', 'userId']),
			
			// 学校id
			collegeId() {
				return this.collegeIndex>0?this.collegeList[this.collegeIndex].id:null
			},
			tabList() {
				return [ { id: null, name: '全部' }, ...this.publishCates]
			}
		},
		watch: {
			// 监听帖子分类
			publishCates(newValue, oldValue) {
				// 获取帖子列表
				this.getList(0)
			},
			
			// 监听学校
			collegeId(newValue, oldValue) {
				// 获取帖子列表
				this.getList(0)
			},
		},
		// 定义局部分享
		// 1.发送给朋友
		onShareAppMessage(res) {
			// console.log(res)
			if (res.from == 'button') {
				let index = Number(res.target.id.split('_')[1])
				let list = this[`list${this.type}`]
				let post = list[index]
				let type = post.video?'video':'image'
				return {
					title: post.description,
					path: `/pages/subPackage/post/post_${type}/post_${type}?id=${post.id}`,
					imageUrl: type=='video'?post.coverImage:this.getArrImage(post)[0],
				}
			} else {
				return {
					title: '校园服务喵小朋',
					path: this.getSharePath(),
					imageUrl: '/static/icon/logo.jpg',
				}
			}
		},
		// 2.分享到朋友圈
		onShareTimeline(res) {
			if (res.from == 'button') {
				let index = Number(res.target.id.split('_')[1])
				let list = this[`list${this.type}`]
				let post = list[index]
				let type = post.video?'video':'image'
				return {
					title: post.description,
					path: `/pages/subPackage/post/post_${type}/post_${type}?id=${post.id}`,
					imageUrl: type=='video'?post.coverImage:this.getArrImage(post)[0],
				}
			} else {
				return {
					title: '校园服务喵小朋',
					path: this.getSharePath(),
					imageUrl: '/static/icon/logo.jpg',
				}
			}
		},
		onPageScroll(e) { // 页面滚动监听
			// console.log(e)
			this.pageScroll = e // 导航背景渐变需要,导航组件需要
		},
		onPullDownRefresh() {
			// 获取轮播图广告
			this.getAdvertisement()
			// 获取发布话题分类
			this.getPublishCates()
			
		},
		onLoad() {
			// 窗口可用高度
			this.windowHeight = uni.getSystemInfoSync().windowHeight
			// 顶部导航高度
			// this.navHeight = this.$refs.nav.navHeight
			// 获取轮播图广告
			this.getAdvertisement()
			// 获取学校列表
			this.getCollegeList()
			// 获取动态列表
			this.getList(0)
			// 隐私协议相关
			wx.getPrivacySetting({
				success: res => {
					console.log('wx.getPrivacySetting', res)
					// 返回结果为: res = { needAuthorization: true/false, privacyContractName: '《xxx隐私保护指引》' }
					if (res.needAuthorization) {
						// 需要弹出隐私协议
						this.privacyContractName = res.privacyContractName
						this.showPrivacyPop = true
					}
				}
			})
		},
		onShow() {
			// 设置底部tabbar消息角标
			this.setBadge()
			
			// 如果有点赞状态修改记录->修改对应帖子点赞状态
			if (this.backPraise) {
				// 遍历数组
				this.list0.forEach((curr, index) => {
					if (curr.id == this.backPraise.id) {
						if(this.backPraise.praiseStatus > curr.praiseStatus) {
							curr.praiseCount += 1
							curr.praiseStatus = this.backPraise.praiseStatus
						}else if(this.backPraise.praiseStatus < curr.praiseStatus) {
							curr.praiseCount -= 1
							curr.praiseStatus = this.backPraise.praiseStatus
						}
					}
				})
				// 清空点赞状态
				this.updateBackPraise(null)
			}
		},
		methods: {
			...mapMutations('m_page', ['updateBeforeChangeTab', 'updatePublishCates']),
			...mapMutations('m_user', ['updateBackPraise', 'updateOpenStatus']),
			
			// 用户同意或拒绝隐私协议，value同意true拒绝false
			handleAgreePrivacyAuthorization(value) {
				this.showPrivacyPop = false
			},
			// 点击轮播图跳转
			clickBannerCate(index) {
				let item = this.swipers[index]
				// 	关联类型，
				switch (item.relateType){
					case 6:
						if (!item.relateId) return
						uni.navigateTo({
							url: `/pages/subPackage/post/post_image/post_image?id=${item.relateId}`
						})
						break;
					// case 4:
					// 	uni.navigateTo({
					// 		url: `/pages/subPackage/pet/shop_detail/shop_detail?id=${item.relateId}`
					// 	})
					// 	break;
					case 7:
						if (!item.relateId) return
						uni.navigateTo({
							url: `/pages/subPackage/post/post_video/post_video?id=${item.relateId}`
						})
						break;
					// case 8:
					// 	this.gotoWeb(item.url)
					// 	break;
					default:
						return false
						break;
				}
			},
			
			// 切换学校tab
			selectCollege(index) {
				if (this.collegeIndex == index) return
				this.collegeIndex = index
				let item = this.collegeList[index]
				// 修改上一页data里面的参数值
				this.schoolId = item.id
				this.schoolName = item.name
				this.getList(0)
			},
			// 切换分类tab
			change(index) {
				if (this.type == index) return
				this.type = index
				if (index == 0) this.collegeIndex = 0
				this.getList(0)
			},
			
			// 点赞处理（首页帖子适用
			postPraiseHandle(id) {
				if (!this.userId) {
					// 跳转登录
					this.gotoLogin()
				} else {
					this.$api.PostPraise({
						worldId: id,
					}).then(res => {
						console.log('postPraise-success', res)
						if (res.data.code == 200) {
							let post = this.list0.find( curr => curr.id == id )
							if (post.praiseStatus) {
								post.praiseStatus = 0
								post.praiseCount -= 1
							} else{
								post.praiseStatus = 1
								post.praiseCount += 1
							}
							this.updateBackPraise({
								id: id,
								praiseStatus: post.praiseStatus
							})
						} else {
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							})
						}
					}).catch(err => {
						console.log('postPraise-fail', err)
					})
				}
			},
			
			// 获取轮播图广告
			getAdvertisement() {
				this.$api.GetAdvertisement({
					type: 4
				}).then(res => {
					console.log('GetAdvertisement-success', res)
					if (res.data.code == 200) {
						this.swipers = res.data.data
					} else {
						uni.showToast({
							icon: 'none',
							title: res.data.msg
						})
					}
				}).catch(err => {
					console.log('GetAdvertisement-fail', err)
					
				}).finally(() => {
					
				})
			},
		
			// 获取发布话题分类和开关状态
			async getPublishCates() {
				let publishCates = await this.getPostTypeList()
				this.updatePublishCates(publishCates)
				let openStatus = await this.getOpenStatus()
				this.updateOpenStatus(openStatus)
			},
			// 获取学校
			getCollegeList() {
				this.$api.GetCollegeList({
					current: 1,
					limit: 20
				}).then(res => {
					console.log('GetCollegeList-success', res)
					if (res.data.code == 200) {
						// 请求成功后
						this.collegeList = [{ id: null, name: "全部校区" }, ...res.data.data.records]
						this.collegeIndex = 0
					}
				}).catch(err => {
					console.log('GetCollegeNameList-fail', err)
				})
			}
		}
	}
</script>

<style lang="scss">
	// 置顶消息盒子
	.top-box {
		height: 80rpx;
		display: grid;
		grid-template-columns: 96rpx 1fr;
		align-items: center;
		.tip {
			width: fit-content;
			font-size: 24rpx;
			color: $uni-color-red;
			padding: 2rpx 6rpx;
			border-radius: 10rpx;
			border: 1rpx solid $uni-color-red;
		}
		.top-list {
			height: 44rpx;
			.title {
				width: 100%;
				height: 44rpx;
				font-size: 24rpx;
				line-height: 44rpx;
				color: $uni-text-color;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}
		}
	}
	
	// 列表
	// 项
	.post {
		
	}
</style>
